<template>
    <div>
        <h2>收款详情</h2>
        <div :data="orders">
            <h3>商品信息</h3>
            <div class="house">
                <img src="../assets/images/p2.jpg" alt="">
                <span class="name">{{orders.goods_name}}</span>
                <span class="lou"></span>
            </div>
            <div class="house">
                <div class="up">
                    <img src="../assets/images/p1.jpg" alt="">
                    <span class="name">{{orders.goods_name}}</span>
                    <span class="lou"></span>
                </div>
            </div>
        </div>
        <div class="order">
            <h3>订单信息</h3>
            <el-row :gutter="20" style="margin-left: 0;margin-right: 0">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>订单号：{{orders.orders_no}}</span>
                        <span>下单时间：{{orders.orders_time}}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>订单状态：{{orders.orders_status}}</span>
                        <span>订单总额：{{orders.orders_total}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="order">
            <h3>买家信息</h3>
            <el-row :gutter="20" style="margin-left: 0;margin-right: 0">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>用户账号：{{orders.user_id}}</span>
                        <span>联系电话：{{orders.user_iphone}}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <span>真实姓名：{{orders.user_name}}</span>
                        <span>证件号码：{{orders.user_card}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="order">
            <h3>收款信息</h3>
            <el-row :gutter="20" style="margin-left: 0;margin-right: 0">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-form ref="order" :model="orders" label-width="80px">
                            <el-form-item label="支付方式:">
                                <el-radio-group v-model="orders.payment_method">
                                    <el-radio :label="1">现金支付</el-radio>
                                    <el-radio :label="2">银行卡</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="流水号">
                                <el-input style="width: 31%" v-model="orders.serial_no"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="order">
            <h3>操作记录</h3>
        </div>
        <div class="down">
            <el-button type="primary" @click="receive(row)">保存</el-button>
            <el-button type="info" @click="">返回</el-button>
        </div>
    </div>
</template>

<script>
    import * as api from '../utils/api'
    export default {
        name: "CollectionDetails",
        data(){
            return{
                orders:{
                    orders_id:this.$route.query.row.orders_id,
                    goods_name:this.$route.query.row.goods_name,
                    serial_no:this.$route.query.row.serial_no,
                    // promo_status:this.$route.query.row.promo.promo_status,
                    orders_status:this.$route.query.row.orders_status,
                    orders_time:this.$route.query.row.orders_time,
                    orders_no:this.$route.query.row.orders_no,
                    orders_total:this.$route.query.row.orders_total,
                    payment_method:this.$route.query.row.payment_method,
                    payment_time:this.$route.query.row.payment_time,
                    user_id:this.$route.query.row.user.user_id,
                    user_iphone:this.$route.query.row.user.user_iphone,
                    user_name:this.$route.query.row.user.user_name,
                    user_card:this.$route.query.row.user.user_card,
                }
            }
        },
        methods:{
            receive(row){
                console.log(row)
                this.axios({
                    method:'post',
                    url:api.RECEIVE_MONEY,
                    data:{}
                }).then((data)=>{
                    console.log(data)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .house{
        padding: 10px;
        background-color: lightgray;
        min-height: 50px;
        margin: 5px auto;
        .up{
            height: 50px;
        }
        button{
            display: block;
            height: 30px;
            line-height: 0;
            margin: 0 auto;
        }
        img{
            display: block;
            background-color: #ff9afd;
            width: 50px;
            height: 50px;
            float: left;
        }
        span{
            display: block;
            line-height: 50px;
            float: left;
        }
        .name{
            color: #4e58ff;
        }
        .lou{
            color: #4e58ff;
            float: right;
        }
    }
    .order{
        background-color: lightgray;
    }
    .order span{
        display: block;
        margin: 10px 10px;
    }
    .el-row {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        /*background: lightgray;*/
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .down{
        width: 200px;
        margin: 0 auto;
    }
</style>